<script setup>
import { ref } from 'vue'

const list = ref([
	{
		id: '1',
		name: '进行中',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '待验收',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '有责取消',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '已验收',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '已完成',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '无责取消',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '购买的',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '出售的',
		text: '0',
		url: ''
	},
	{
		id: '1',
		name: '积分总计',
		text: '0',
		url: ''
	}
])

const doChangeHandler = () => {
	
}
</script>

<template>
	<view class="desk">
		<view class="cover">
			<image src="http://yjy-xiaotuxian-dev.oss-cn-beijing.aliyuncs.com/picture/2021-05-20/84abb5b1-8344-49ae-afc1-9cb932f3d593.jpg"></image>
		</view>
		<view class="tabs">
			<view>
				<text class="text">信用分</text>
				<text class="text">0</text>
			</view>
			<view>
				<text class="text">成交率</text>
				<text class="text">0</text>
			</view>
		</view>
		<view class="content">
			<view class="zone">
				<uni-section title="成交量(统计)" type="line" padding>
					<uni-grid :column="3" :square="false" :highlight="false" @change="doChangeHandler">
						<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
							<view class="grid-item-box">
								<text class="text">{{ item.name }}</text>
								<text class="text">{{ item.text }}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</uni-section>
			</view>
			<view class="zone">
				<uni-section title="进行中(订单)" type="line" padding>
					<uni-list :border="true">
						<uni-list-chat
							link
							:avatar-circle="true"
							title="uni-app"
							avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
							note="您收到一条新的消息"
							time="2020-02-02 20:20"
							to="/pages/survey/survey">
						</uni-list-chat>
						<uni-list-chat
							:avatar-circle="true"
							title="uni-app"
							avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"
							note="您收到一条新的消息"
							time="2020-02-02 20:20"
							badge-positon="left"
							badge-text="99">
						</uni-list-chat>
					</uni-list>
				</uni-section>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
page {
	height: 100%;
	background-color: #f4f4f4;
}
.desk{
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 180rpx 0 0;
	position: relative;
	
	.content {
		 display: flex;
		 flex-direction: column;
		 padding: 0 20rpx 20rpx;
		 
		.zone {
	    margin-top: 20rpx;
	    border-radius: 10rpx;
	    background-color: #fff;
	  }
			 
		.grid-dynamic-box {
			margin-bottom: 15px;
		}
		
		.grid-item-box {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
		
		.grid-item-box-row {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	}
	
	.image {
		width: 25px;
		height: 25px;
	}
	
	.text {
		font-size: 14px;
		margin-top: 5px;
	}

}

.cover {
  width: 750rpx;
  height: 225rpx;
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}
.tabs {
  display: flex;
  justify-content: space-evenly;
  height: 100rpx;
  line-height: 90rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
  color: #333;
  background-color: #fff;
  position: relative;
  z-index: 9;
  .text {
    margin: 0 20rpx;
    position: relative;
  }
}
</style>
